<template>
  <div v-if="skeletonStatus" class="skeleton-container">
    <v-skeleton-loader v-bind="syncedAttrs"></v-skeleton-loader>
  </div>
</template>

<script lang="ts">
import { Vue, Component, PropSync } from "vue-property-decorator";
@Component
export default class SkeletonLoader extends Vue {
  @PropSync("attrs", { type: Object, default: () => ({}) })
  readonly syncedAttrs!: object;

  get skeletonStatus() {
    return this.$store.state.SkeletonLoaderStore.skeletonStatus;
  }
}
</script>

<style lang="scss">
@import "@/components/SkeletonLoader/SkeletonLoader.scss";
</style>
